<template>
  <div class="about">
    <h1>{{ $t('about.title') }}</h1>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ $t('about.description') }}</span>
        </div>
      </template>
      <div class="text item">
        {{ $t('about.content') }}
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'AboutView'
})
</script>

<style lang="scss" scoped>
.about {
  padding: 20px;
  
  .box-card {
    max-width: 800px;
    margin: 0 auto;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
    line-height: 1.5;
  }
}
</style>